<template>
  <div class="drawer" :style="alarmType==10?{width: '100%', right: 0, top: 0}:{}">
    <div class="drawer-title">
      <span>{{ title }}</span>
      <a-icon class="close-icon" type="close" @click="handleDrawer" v-if="alarmType!=10" />
    </div>
    <div class="drawer-body">
      <a-button v-if="Object.keys(message).length > 0 && message.disposalStatus == 0" @click="onHandleDispose(message, 'add')" type="primary" class="disposeBtn">处置</a-button>
      <a-button v-if="Object.keys(message).length > 0 && message.disposalStatus == 1" @click="onHandleDispose(message, 'details')" type="primary" class="disposeBtn">处置结果</a-button>
      <a-descriptions :column="1" layout="vertical">
        <a-descriptions-item label="告警程度" v-if="Object.keys(message).length > 0 && message.alarmLevel">
          <a-tag :color=" message.alarmLevel == 1 ? '#d9001b' : message.alarmLevel == 2 ? '#f59a23' : message.alarmLevel == 3 ? '#bfbf00' : '' " >
            {{ $filterDictTextByCache('alarm_degree', message.alarmLevel) }}
          </a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="人员信息">
          <a-table v-if="alarmType==5||alarmType==6||alarmType==7||alarmType==8" :columns="columns" :data-source="personData" rowKey="phone" />
          <a-list v-else item-layout="vertical" :data-source="personData">
            <a-list-item slot="renderItem" slot-scope="item, index">
              <a-list-item-meta>
                <a-row type="flex" slot="description" class="renderItem">
                  <a-col :span="12">姓名：{{ item.name }} </a-col>
                  <a-col :span="12">手机号码：{{ item.cellPhoneNumber }} </a-col>
                  <a-col :span="12">身份证：{{ item.idCard }}</a-col>
                  <a-col :span="12">户籍所在地：{{ item.registeredResidence }}</a-col>
                  <a-col :span="12">专管员姓名：{{ item.specialManagerName }}</a-col>
                  <a-col :span="12">专管员手机号：{{ item.specialManagerPhone }}</a-col>
                  <a-col :span="24">执行时间：{{ item.executionTime ? item.executionTime : '--' }}</a-col>
                  <a-col :span="24"
                    >现居住地址：{{ item.currentResidentialAddress ? item.currentResidentialAddress : '--' }}</a-col
                  >
                </a-row>
                <a-avatar slot="avatar" :size="120" v-if="item.headImg" :src="item.headImg" />
                <a-avatar slot="avatar" :size="120" v-else icon="user" shape="square" />
              </a-list-item-meta>
            </a-list-item>
          </a-list>
        </a-descriptions-item>
        <!--//告警类型（alarmType==10）为短信签到告警才有-->
        <a-descriptions-item label="打卡情况" v-if="alarmType==10">
          <z-table
            ref="table"
            rowKey="punchNumber"
            :showAlert="false"
            :showSelection="false"
            :columns="columns1"
            :dataSource="punchs"
            @change="onTableChange"
          >
            <template slot="title" slot-scope="currentPageData"> 未打卡记录 </template>
          </z-table>
        </a-descriptions-item>
        <!--//告警类型（alarmType==11）为异常资金往来告警才有-->
        <a-descriptions-item label="资金往来信息" v-if="alarmType==11">
          <a-table :columns="columns2" :data-source="flows" rowKey="id" />
        </a-descriptions-item>
        <a-descriptions-item label="详细情况">
          <p v-if="alarmType!=1 && Object.keys(message).length > 0 && message.alarmDescription">{{ message.alarmDescription }}</p>
          <!--//告警类型（alarmType==1）为复吸风险告警才有-->
          <a-table v-if="alarmType==1" :columns="columns3" :data-source="recordConversations" rowKey="alarmId">
            <template slot="title" slot-scope="currentPageData"> 通联记录-通话 </template>
          </a-table>
          <!--//告警类型（alarmType==1）为复吸风险告警才有-->
          <a-table v-if="alarmType==1" :columns="columns4" :data-source="recordMessages" rowKey="alarmId">
            <template slot="title" slot-scope="currentPageData"> 通联记录-短信 </template>
          </a-table>
        </a-descriptions-item>
      </a-descriptions>
    </div>
    <!--弹窗区域-->
    <dispose-modal ref="disposeModal" @ok="modalFormOk" />
  </div>
</template>

<script>
import * as alarmServiceApi from '@/api/sjsk/alarmService'
import disposeModal from './alarmCenterDisposeModal'
export default {
  components: { disposeModal },
  data() {
    return {
      title: null,
      taskId: null,
      alarmType: null,
      message: {},
      personData: [],
      positions: [],
      flows: [],
      recordConversations: [],
      recordMessages: [],
      pageFilter: { pageNo: 1, pageSize: 10, },
      punchs: {},
      columns: [
        { title: '序号', dataIndex: 'order', width: 80, customRender: (text, record, index) => { return index + 1 } },
        { title: '姓名', dataIndex: 'name', width: 80 },
        { title: '手机号码', dataIndex: 'cellPhoneNumber', width: 80 },
        { title: '归属地', dataIndex: 'placeOwnership', width: 80 },
      ],
      columns1: [
        { title: '序号', dataIndex: 'order', width: 80, customRender: (text, record, index) => { return index + 1 } },
        { title: '打卡号码', dataIndex: 'punchNumber', width: 80 },
        { title: '未打卡日期', dataIndex: 'punchTime', width: 80 },
      ],
      columns2: [
        { title: '序号', dataIndex: 'order', width: 80, customRender: (text, record, index) => { return index + 1 } },
        { title: '本端账号', dataIndex: 'localAccount', width: 80 },
        { title: '对端账号', dataIndex: 'peerAccount', width: 80 },
        { title: '转账金额', dataIndex: 'transferAmount', width: 80 },
        { title: '转账时间', dataIndex: 'transferTime', width: 80 },
      ],
      columns3: [
        { title: '序号', dataIndex: 'order', width: 80, customRender: (text, record, index) => { return index + 1 } },
        { title: '对端号码', dataIndex: 'peerNumber', width: 80 },
        { title: '通联次数', dataIndex: 'timesCommunication', width: 80 },
        { title: '通联时段', dataIndex: 'sonnectionPeriod', width: 80 },
      ],
      columns4: [
        { title: '序号', dataIndex: 'order', width: 80, customRender: (text, record, index) => { return index + 1 } },
        { title: '对端号码', dataIndex: 'peerNumber', width: 80 },
        { title: '关键词类型', dataIndex: 'keywordTypeName', width: 80 },
        { title: '通联次数', dataIndex: 'timesCommunication', width: 80 },
        { title: '通联时段', dataIndex: 'sonnectionPeriod', width: 80 },
      ],
    }
  },
  created() {
    this.getRouteQuery(this.$route)
  },
  mounted() {},
  watch: {
    $route(data) {
      this.getRouteQuery(data)
    },
    taskId(value) {
      this.getAlarmDetails(value)
    },
    alarmType(value) {
      if(value==10) this.getPunchRecord(this.taskId)
      if(value==11) this.getAlarmCapitalDetails(this.taskId)
    }
  },
  methods: {
    // 获取告警消息详情
    getAlarmDetails(id) {
      alarmServiceApi
        .getAlarmDetails(id)
        .then((res) => {
          if (res.success) {
            const { message, detailsPersons, positions, recordConversations, recordMessages } = res.result
            const projectTitle = process.env.VUE_APP_PLATFORM_NAME
            if (Object.keys(message).length > 0) {
              this.message = message
              this.alarmType = this.message.alarmType
              this.title = this.$filterDictTextByCache('model_type', this.alarmType)
              document.title = this.title + '-告警详情' + ' · ' + projectTitle
            }
            this.personData = detailsPersons
            this.positions = positions
            this.recordConversations = recordConversations
            this.recordMessages = recordMessages
          } else {
            this.$message.warn(res.message)
          }
        })
        .catch((e) => {
          this.$message.warn('请求失败！')
        })
    },
    // 获取打卡记录【短信签到告警】
    getPunchRecord(id) {
      alarmServiceApi.getPunchRecord(id).then((res) => {
        if (res.success) {
          const { result } = res
          this.punchs = result ? result : {}
        } else {
          this.$message.warn(res.message)
        }
      })
      .catch((e) => {
        this.$message.warn('请求失败！')
      })
    },
    // 获取异常资金来往【异常资金往来告警】
    getAlarmCapitalDetails(id) {
      alarmServiceApi.getAlarmCapitalDetails(id).then((res) => {
        if (res.success) {
          const { flows } = res.result
          this.flows = flows
        } else {
          this.$message.warn(res.message)
        }
      })
      .catch((e) => {
        this.$message.warn('请求失败！')
      })
    },
    // 处置、处置结果
    onHandleDispose(record, type) {
      this.$refs.disposeModal.show(record, type)
    },
    modalFormOk() {
      this.getAlarmDetails(this.taskId)
    },
    handleDrawer() {
      this.$emit('handleDrawer')
    },
    // 监听路由变化
    getRouteQuery($route) {
      if ($route.params) {
        const { params } = $route
        if (params.id) this.taskId = params.id
      }
    },
  },
}
</script>
<style lang="less" scoped>
.drawer {
  width: 600px;
  position: absolute;
  right: -12px;
  top: -12px;
  bottom: 0;
  background-color: #fff;
  border-left: 1px #e8e8e8 solid;
  overflow-x: auto;
  .drawer-title {
    background-color: #fff;
    border-bottom: 1px #e8e8e8 solid;
    display: flex;
    padding: 16px 20px;
    justify-content: space-between;
    align-items: center;
    span {
      font-size: 16px;
      font-weight: 600;
    }
    .close-icon {
      color: #333;
      font-size: 16px;
    }
  }
  .drawer-body {
    padding: 20px;
    position: relative;
    > h3 {
      padding: 10px 0;
      font-weight: bold;
    }
  }
}

:deep(.ant-list-grid .ant-col > .ant-list-item) {
  display: flex;
}
:deep(.ant-list-split .ant-list-item:last-child) {
  border-bottom: 1px solid #e8e8e8;
}

.con-content-list {
  border: 1px #e8e8e8 solid;
  border-radius: 6px;
  padding: 16px 16px 0 16px;
}

/deep/.ant-fullcalendar-fullscreen {
  .ant-fullcalendar-calendar-body {
    padding: 0;
  }
  .ant-fullcalendar-header .ant-radio-group {
    display: none;
  }
  .ant-fullcalendar-date {
    height: 60px;
  }
  ul {
    padding: 0;
  }
  li::marker {
    content: '';
  }
  .ant-badge-status-text {
    margin-left: 0;
  }
  .ant-fullcalendar-content {
    height: auto;
    text-align: right;
    overflow-y: initial;
  }
}
.disposeBtn {
  position: absolute; right: 24px
}
:deep(.ant-descriptions-item-label) {
  font-weight: bold;
}
.renderItem {
  color: #333;
  .ant-col {
    padding-bottom: 4px;
    &:last-child {
      padding-bottom: 0;
    }
  }
}
</style>
